<template>
  <span>

    <el-form-item label="商家名称" prop="name">
      <el-input
        v-model="merchandiserName"
        placeholder="请选择商家"
        clearable
        style="width: 240px"
        readonly
      />
      <el-button type="primary" icon="el-icon-plus" @click="open=true">选择</el-button>
    </el-form-item>

    <el-dialog title="选择商家" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false" :before-close="cancelForm">

      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
        <el-form-item label="商家名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入商家名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="btnSearch">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据展示区table-->
      <el-table v-loading="loading" :data="tableData.rows">
        <el-table-column label="商家ID" prop="id" width="100" />
        <el-table-column label="商家名称" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="分类图片" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.picture" width="150">
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-circle-check"
              @click="handleChoose(scope.row)"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页条 -->
      <div style="margin-top: 10px;">
        <el-pagination
          v-if="tableData.total>0"
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40,50,100]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </el-dialog>

  </span>
</template>

<script>
import PageMixin from '@/mixin/PageMixin.js'
import { dataApi } from '@/api/merchandiser.js'
export default {
  mixins: [PageMixin],
  data() {
    return {
      fetchDataApi: dataApi,
      primaryKey: 'id',
      open: false,
      queryParams: {
        page: 1,
        size: 10,
        status: 0
      },
      merchandiserName: undefined
    }
  },
  methods: {
    handleChoose(row) {
      console.log(row)
      this.merchandiserName = row.name
      // 回调自定义函数
      this.$emit('callback', row)

      this.cancelForm()
    },
    cancelForm() {
      this.open = false
      this.rest()
    },
    // 清空表单的值
    rest() {
      // element-ui内置方法
      if (this.$refs['queryForm']) {
        this.$refs['queryForm'].resetFields()
      }

      this.btnSearch()
    },
    clearQueryForm() {
      this.merchandiserName = undefined
    }
  }
}
</script>

<style>
</style>
